import './App.css'
import {useEffect, useState} from 'react'
import * as dayjs from 'dayjs'

const timeDiff = () => {
  const holiday = dayjs('2022-09-09')
  let now = dayjs()
  const day = holiday.diff(now, 'day')
  return {
    day
  }
}

function App() {
  const [diff, setDiff] = useState()
  useEffect(() => {
    const timerID = setInterval(
      () => {
        setDiff(timeDiff())
      }, 1000)
    return () => {
      clearInterval(timerID)
    }
  }, [])

  return (
    <div className="App">
      <section className='section'>
        <img src=' https://woflow.gitee.io/splatoon3-countdown/images/0.jpg' className='img'
             style={{maxWidth: 400, width: '100%'}}/>
        <h1 style={{fontSize: 26, marginBottom: 20}}>
          斯普拉遁3 发布还有
        </h1>
        <h1>
          {
            diff && `${diff.day}天`
          }
        </h1>
        <div style={{fontSize: 20, marginBottom: 10}}>2022年9月9日！！！</div>
        <div style={{marginBottom: 20}}>
          <img src=' https://woflow.gitee.io/splatoon3-countdown/images/panda-splatoon3.jpg'/>
          <img src=' https://woflow.gitee.io/splatoon3-countdown/images/salmon.gif' style={{width: 100}}/>
        </div>
      </section>

      <section className='section'>
        <h1>2022/04/22 Nintendo Direct 宣传视频</h1>
        <div className='video-player-frame'>
          <iframe src="//player.bilibili.com/player.html?aid=971747478&bvid=BV1GY4y1Y7DG&cid=299127965&page=1"
                  scrolling="no" border="0" frameBorder="no" framespacing="0" allowFullScreen={true}
                  className='video-player'>
          </iframe>
        </div>
      </section>

      <section className='section'>
        <h1>2021/02/18 Nintendo Direct 宣传视频</h1>
        <div className='video-player-frame'>
          <iframe src="//player.bilibili.com/player.html?aid=971747478&bvid=BV15p4y1W7iL&cid=299127965&page=1"
                  scrolling="no" border="0" frameBorder="no" framespacing="0" allowFullScreen={true}
                  className='video-player'>
          </iframe>
        </div>
      </section>
      <section className='section'>
        <h1>图片赏析</h1>
        <div>
          <img src=' https://woflow.gitee.io/splatoon3-countdown/images/splatoon-3-switch-screenshot01.jpg'
               className='img'/>
          <img src=' https://woflow.gitee.io/splatoon3-countdown/images/splatoon-3-switch-screenshot02.jpg'
               className='img'/>
          <img src=' https://woflow.gitee.io/splatoon3-countdown/images/splatoon-3-switch-screenshot03.jpg'
               className='img'/>
          <img src=' https://woflow.gitee.io/splatoon3-countdown/images/splatoon-3-switch-screenshot04.jpg'
               className='img'/>
          <img src=' https://woflow.gitee.io/splatoon3-countdown/images/splatoon-3-switch-screenshot05.jpg'
               className='img'/>
          <img src=' https://woflow.gitee.io/splatoon3-countdown/images/splatoon-3-switch-screenshot06.jpg'
               className='img'/>
          <div>图片来源于任天堂官网 <a
            href='https://www.nintendo.com/games/detail/splatoon-3-switch/'>https://www.nintendo.com/games/detail/splatoon-3-switch/</a>
          </div>
        </div>
      </section>
    </div>
  )
}

export default App
